<script setup>
import { ref, defineEmits, defineProps, watch } from 'vue';
import VueClipboard from 'vue-clipboard3'
import { useRouter, useRoute } from 'vue-router'
import login from '../login/index.vue';
import request from '../../utils/request'
import { Toast } from 'vant';
import img1 from '@/assets/img/activityimg/prize/img1.png'
import img2 from '@/assets/img/activityimg/prize/img2.png'
import img3 from '@/assets/img/activityimg/prize/img3.png'
import img4 from '@/assets/img/activityimg/prize/img4.png'
import img5 from '@/assets/img/activityimg/prize/img5.png'
import img6 from '@/assets/img/activityimg/prize/img6.png'
import img7 from '@/assets/img/activityimg/prize/img7.png'
import img8 from '@/assets/img/activityimg/prize/img8.png'
import { onMounted } from 'vue';
import { nextTick } from 'vue';
const router = useRouter()
const route = useRoute()
const { toClipboard } = VueClipboard()
onMounted(() => {
  nextTick(() => {

    if (localStorage.getItem('userdata')) {
      refresh()
    }
  })
})

// 获取用户信息
const userData = ref({})
// 登录窗口是否展示
const isLogin = ref(false)
// 是否已登录
const yesLogin = ref(false)

// 分享的code
const code = ref('')
if (route.query.code) {
  code.value = route.query.code
} else {
  code.value = ''
}
//获取用户信息
if (localStorage.getItem('userdata')) {
  userData.value = JSON.parse(localStorage.getItem('userdata'))
  yesLogin.value = true
} else {
  // yesLogin.value = false
}

const cjnumber = ref(0)
// 任务弹框
const ismodel = ref(false)
const fxmodel = ref(false)
// 任务列表
const tasklist = ref({})
const modeltyep = ref('');
// 区分角色列表
const listData = ref([])
// 展示默认区分角色
const listText = ref('请选择服务器')
// 获取区服id
const listId = ref('')
// 获取角色id
const roleId = ref('')
// 区服列表是否显示
const islist = ref(false)

const prizeImgUrl = ref('');//奖品图片
const rotate_angle = ref('rotate(0deg)');
const start_rotating_deg = ref(0);//初始旋转角度
const second = ref('transform 4s ease-in-out');//初始旋转速度
const degNum= ref([{
      id:1,
      name:'银币50000',
      idx:315,
      img:img2
  },{
      id:2,
      name:'金币888',
      idx:270,
      img:img3
  },{
      id:3,
      name:'金色卡牌随机',
      idx:225,
      img:img4
  },{
      id:4,
      name:'传说卡碎片',
      idx:180,
      img:img5
  },{
      id:5,
      name:'1小时伙伴挂机经验',
      idx:135,
      img:img6
  },{
      id:6,
      name:'精良卡包',
      idx:90,
      img:img7
  },{
      id:7,
      name:'金币100',
      idx:45,
      img:img8
  },{
      id:8,
      name:'金币500',
      idx:0,
      img:img1
  }])

watch(yesLogin, async (newQuestion, oldQuestion) => {
  console.log('yesLogin', yesLogin)
  if (yesLogin.value == true) {
    console.log('yesLogin++', yesLogin)
    userData.value = JSON.parse(localStorage.getItem('userdata'))
    refresh()
  }else{
    cjnumber.value = 0
  }
})
const ispropsmodel = ref(false)
const ishelpmodel = ref(false)
// 抽奖弹窗
const isshowimg = ref(false)

const islucky = ref(0)
// 开始抽奖
function onLucky() {
  if (yesLogin.value) {
    if (listId.value == '' || roleId.value == '') {
      Toast.fail('请选择区服角色~')
    } else {
      islucky.value++;
      
      let data = {
        uid: userData.value.uid,
        server_id: listId.value,
        role_id: roleId.value
      }
      if(islucky.value<=1){
        request({
          url: '/activity/wheel/playGame',
          method: 'post',
          data
        }).then(res => {
          if (res.data.status == 200) {
            refresh()
            setTimeout(() => {
              rotating(res.data.data.prizeInfo.idx, Number(res.data.data.prizeInfo.id));
              
            }, 100);
          } else {
            Toast.fail(res.data.message);
          }
        })
      }
      
    }
  } else {
    Toast.fail('请登录~')
  }

}
// 任务
function onmodelfun(type) {
  if (yesLogin.value) {
    ismodel.value = !ismodel.value
    taskdata()
  } else {
    Toast.fail('请登录~')
  }
}
// 指针旋转处理
function rotating(idx, id) {
  let oTurntable = document.querySelector("#turntable");
  var rand_circle = 3; //默认多旋转5圈
  var deg =
    start_rotating_deg.value +
    rand_circle * 360 +
    idx -
    (start_rotating_deg.value % 360); //将要旋转的度数

  // start_rotating_deg.value = deg; //下一次旋转的开始度数

  oTurntable.style.transform = "rotate(" + deg + "deg)";

  // 显示中奖图片
  setTimeout(() => {
    isshowimg.value = true

    for (var i = 0; i < degNum.value.length; i++) {

      if (id === degNum.value[i].id) {

        prizeImgUrl.value = degNum.value[i].img

      }
    }
  }, 4600);

}
const propslistdata = ref([
  {
    title: '成功邀请2人 500金币',
    state: true
  },
  {
    title: '成功邀请5人 2000金币',
    state: false
  },
  {
    title: '成功邀请8人 传说卡牌自选',
    state: true
  },
  {
    title: '成功邀请10人 传说坐骑自选',
    state: false
  }
])
// 点击刷新
function activeRefresh(){
  if (yesLogin.value){
    refresh()
  }else{
    Toast.fail('请登录~');
  }
}
// 刷新抽奖次数接口
const times  = ref()
function refresh() {

  let data = {
    uid: userData.value.uid,
    token: userData.value.token,
  }
  request({
    url: '/api/user/refreshDrawNum',
    method: 'post',
    data
  }).then(res => {
    if (res.data.status == 200) {
      // 刷新剩余次数
      cjnumber.value = res.data.data.residue_num
      let ljnumber = res.data.data.use_num
      times.value = ljnumber
      if (ljnumber >= 50) {
        imagename.value = '50'
        if (ljnumber >= 80) {
          imagename.value = '80'
          if (ljnumber >= 100) {
            imagename.value = '100'
            if (ljnumber >= 120) {
              imagename.value = '120'
            }
          }
        }
      }
    } else {
      Toast.fail(res.data.message);
    }
  })

}
// 任务列表
function taskdata() {
  let data = {
    uid: userData.value.uid,
    token: userData.value.token,
  }
  request({
    url: '/api/user/getTaskList',
    method: 'post',
    data
  }).then(res => {
    if (res.data.status == 200) {
      tasklist.value = res.data.data
    } else {
      Toast.fail(res.data.message);
    }
  })
}
// 任务去完成
function tolink(url, id, index) {
  console.log('index', index)
  if (id == 2) {
    totask(id)
    ismodel.value = false
  } else {
    window.location.href = url
    totask(id)
    ismodel.value = false
  }

}
// 完成任务
function totask(id) {
  let data = {
    uid: userData.value.uid,
    token: userData.value.token,
    task_id: id
  }
  request({
    url: '/api/user/doneTask',
    method: 'post',
    data
  }).then(res => {
    if (res.data.status == 200) {
      
      if(id == 2){
        Toast.fail({
          duration: 0,
          closeOnClick:true,
          message: '冒险者您好，您的组队专属邀请已复制成功，快发送给好友，邀他们一同冒险吧!',
        })
      }
     
    }else if(res.data.status == 410){
      if(id == 2){
        Toast.fail({
          duration: 0,
          closeOnClick:true,
          message: '冒险者您好，您的组队专属邀请已复制成功，快发送给好友，邀他们一同冒险吧!',
        })
      }
    } else {
      Toast.fail(res.data.message);
    }
  })
}
// 区服列表
function activelist() {
  if (yesLogin.value) {
    let data = {
      uid: userData.value.uid,
      token: userData.value.token,
    }
    request({
      url: '/api/user/getRoleList',
      method: 'post',
      data
    }).then(res => {
      if (res.data.status == 200) {
        listData.value = res.data.data
        islist.value = true
      } else {
        Toast.fail(res.data.message);
      }
    })
  } else {
    Toast.fail('请登录~');
  }
}
// 选择区服角色
function activeServer(item) {
  listText.value = item.server_name + '-' + item.role
  listId.value = item.sid
  roleId.value = item.roleid
  islist.value = false

}
// 集结奖励接口
function inviteReward() {
  if (yesLogin.value) {
    ispropsmodel.value = true
    let data = {
      uid: userData.value.uid,
      token: userData.value.token,
    }
    request({
      url: '/api/user/inviteReward',
      method: 'post',
      data
    }).then(res => {
      if (res.data.status == 200) {
        propslistdata.value = res.data.data
      } else {
        Toast.fail(res.data.message);
      }
    })
  } else {
    Toast.fail('请登录~');
  }
}

// 领取奖励
function receive(id) {
  if (listId.value == '' || roleId.value == '') {
    Toast.fail('请选择区服角色~')
  } else {
    let data = {
      uid: userData.value.uid,
      server_id: listId.value,
      role_id: roleId.value,
      assemble_id: id
    }
    request({
      url: '/activity/wheel/receiveAssemble',
      method: 'post',
      data
    }).then(res => {
      if (res.data.status == 200) {
        inviteReward()
      } else {
        Toast.fail(res.data.message);
      }
    })
  }
}
// 退出账号
function tologin() {
  isLogin.value = true
  localStorage.clear();
  yesLogin.value = false
  listData.value = []
  listText.value = '请选择区服角色'
  cjnumber.value = 0
}
// 关闭登录窗口
function getloginshow(value) {
  console.log(value)
  isLogin.value = value
}
// 是否登录
function showLogin(value) {
  console.log(value)
  yesLogin.value = value
}
// 关闭中奖弹窗
function good() {
  isshowimg.value = false
  islucky.value = 0
}

// 复制链接
const shareUrl = ref('')
function copy() {
  console.log('复制动作')
  if (yesLogin.value) {
    shareUrl.value = '冒险者您好，这有一条组队邀请，点击链接立刻进队：'+'https://wjmtpage.nextjoy.com.cn/#/loading?code=' + JSON.parse(localStorage.getItem('userdata')).code
    toClipboard(shareUrl.value)
    totask(2)
   
  } else {
    Toast.fail('请登录~')
  }

}
// 下载地址
function download() {
  window.location.href = 'https://wjmtpage.nextjoy.com.cn/#/mtydpage'
}
// 里程奖励
const imagename = ref(0)
const jbimagename = ref(0)
const istreasure = ref(false)
const stage = function (imagename) {
  return new URL(`../../assets/img/activityimg/${imagename}.png`, import.meta.url).href
}
const jbstage = function (jbimagename) {
  return new URL(`../../assets/img/activityimg/${jbimagename}.png`, import.meta.url).href
}
function showtreasure(item) {
  jbimagename.value = item
  istreasure.value = true
}
// 音频
const sxaudio = ref(false)
function audioEnd() {
  // isaudioimg.value = true
  console.log('out')
}
const audioplay = ref()
const audioisplay = ref(false)
function onAudio() {
  console.log('音频')
  audioisplay.value = !audioisplay.value
  // isaudioimg.value = false
  console.log('click audio')
  if (audioisplay.value) {
    audioplay.value.load()
    audioplay.value.play()
  } else {
    audioplay.value.load()
    audioplay.value.pause()
  }
}
</script>
<template>
  <!-- 宝箱奖励 -->
  <div v-show="istreasure" class="fixed bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[10000] flex justify-center items-center">
    <div class="treasurebg w-[18.4375rem] h-[20.0625rem] relative flex flex-col justify-center items-center">
      <div class="absolute top-[2.0625rem] right-4" @click="istreasure = false">
        <img class="w-[1.9375rem] h-[2rem]" src="../../assets/img/activityimg/close.png" alt="">
      </div>
      <div>
        <img class="w-[14.25rem] h-[14.0625rem] z-[1]" src="../../assets/img/activityimg/propsjb.png" alt="">
      </div>
      <div class="z-[2] mt-[-5rem]">
        <img class="w-[4.0625rem] h-[1rem]" :src="jbstage(jbimagename)" alt="">
      </div>
      <div class="z-[2] w-[9.0625rem] h-[1rem] mt-3  propstitlebg flex justify-center items-center">
        <span class="proptitlespan flex justify-center items-center">
          已抽取{{ times }}
        </span>
      </div>
    </div>
  </div>
  <!-- 音频 -->
  <audio loop @ended="audioEnd" controls id="audiofile" ref="audioplay" class="z-[0]" preload="none" v-show="sxaudio">
    <source src="../../assets/img/activityimg/filemp3.mp3" type="audio/mp3">
    Your browser does not support the audio element
  </audio>
  <!-- 头部 -->
  <div class="w-full h-[3.875rem] fixed left-0 top-0 z-[99]">
    <div class="w-full h-[2.3125rem] bg-[#F2EDEA] overflow-hidden">
      <span class="text-[.8125rem] leading-[2.3125rem] text-[#975935] text-right ml-[1rem]" v-if="yesLogin">你好! {{
        userData.uid }}</span>
      <img src="../../assets/img/activityimg/loginbut.png"
        class="w-[3.75rem] h-[1.5625rem] mt-[.375rem] ml-[1rem] float-left" v-if="!yesLogin" @click="tologin()" />
      <p class="w-[6.25rem] h-[2.3125rem] float-right mr-[1rem]">
        <span class="text-[.8125rem] leading-[2.3125rem] text-[#975935] text-right ml-[.625rem]"
          @click="tologin()">{{ !yesLogin ? '' : '切换账号' }}</span>
        <span class="text-[.8125rem] leading-[2.3125rem] text-[#975935] text-right ml-[.625rem]"
          @click="tologin()">{{ !yesLogin ? '' : '退出' }}</span>
      </p>
    </div>
    <div class="bgImg w-full h-[1.5625rem]">
      <div class="w-[92%] mx-auto">
        <p class="text-[.8125rem] text-[#975935] leading-[1.5625rem] w-[90%]" @click="activelist">{{ listText }}</p>
      </div>
    </div>
    <!-- 列表 -->
    <ul class="w-full bg-[#FCF4EA] pt-[.375rem] pb-[.375rem]" v-if="islist">
      <li class="w-full h-[1.625rem] leading-[1.625rem] text-[#975935] text-[.8125rem] text-center"
        v-for="(item, index) in listData" :key="index" @click="activeServer(item)">{{ item.server_name }} - {{ item.role }}
      </li>
    </ul>
  </div>
  <!-- 抽中奖励图片 -->
  <div v-if="isshowimg"
    class="fixed bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[10000] flex justify-center items-center left-0 top-0">
    <div class="prizeBg w-[18.4375rem] h-[19.4375rem] relative">
      <img :src="prizeImgUrl" class="w-[10rem] h-[7.125rem] mt-[5.25rem] mx-auto" />
      <img src="../../assets/img/activityimg/ol.png" class="w-[6.25rem] h-[2.75rem] mx-auto mt-[1.25rem]"
        @click="good()" />
    </div>
  </div>
  <!-- loding -->
  <div v-show="fxmodel"
    class="fixed bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[900] flex justify-center items-center left-0 top-0">
    <div class="absolute">
    </div>
    <div class="fxmodel w-[18.5625rem] h-[18.0625rem] relative">
      <div class="absolute top-[.0625rem] right-0" @click="fxmodel = false">
        <img class="w-[1.9375rem] h-[2rem]" src="../../assets/img/activityimg/close.png" alt="">
      </div>
      <div class=" absolute top-[12.125rem] left-[7.0625rem]">
        <img class="w-[6.25rem] h-[2.75rem]" src="../../assets/img/activityimg/fxbutton.png" alt="" @click="copy()">

      </div>
    </div>
  </div>
  <!-- 玩法介绍 -->
  <div v-show="ishelpmodel"
    class="fixed bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[10000] flex justify-center items-center left-0 top-0">
    <div class="helptag w-[20.875rem] h-[24.3125rem] relative">
      <div class="absolute top-[.0625rem] right-0" @click="ishelpmodel = false">
        <img class="w-[1.9375rem] h-[2rem]" src="../../assets/img/activityimg/close.png" alt="">
      </div>
    </div>
  </div>
  <!-- 任务 -->
  <div v-show="ismodel"
    class="fixed  bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[900] flex justify-center items-center left-0 top-0">
    <div class="rwbg w-[20.875rem] h-[24.3125rem] relative">
      <div class="absolute top-[.0625rem] right-0" @click="ismodel = false"><img class="w-[1.9375rem] h-[2rem]"
          src="../../assets/img/activityimg/close.png" alt="">
      </div>
      <div class="flex flex-col mt-[4.375rem]">
        <div class="flex items-center ml-[3rem] justify-between mb-[.375rem]" v-for="(item, index) in tasklist.dayTask">
          <span class="textsyel">{{ item.msg }}{{ item.is_done == 1 ? '（1/1）' : '（0/1）' }}</span>
          <img v-if="item.is_done == 1" src="../../assets/img/activityimg/okbut.png"
            class="w-[3.3125rem] h-[1.5rem] mr-[1.625rem]" alt="" />
          <img v-if="item.is_done == 0" src="../../assets/img/activityimg/notbut.png"
            class="w-[3.3125rem] h-[1.5rem] mr-[1.625rem]" alt="" @click="tolink(item.url, item.id, index)" />
        </div>
        <!-- 任务2 -->
        <div class="mt-[3rem]">
          <div class="flex items-center ml-[3rem] justify-between mb-[.3125rem]" v-for="(item, index) in tasklist.task">
            <span class="textsyel">{{ item.msg }}{{ item.is_done == 1 ? '（1/1）' : '（0/1）' }}</span>
            <img v-if="item.is_done == 1" src="../../assets/img/activityimg/okbut.png"
              class="w-[3.3125rem] h-[1.5rem] mr-[1.625rem]" alt="">
            <img v-if="item.is_done == 0" src="../../assets/img/activityimg/notbut.png"
              class="w-[3.3125rem] h-[1.5rem] mr-[1.625rem]" alt="" @click="tolink(item.url, item.id)">
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- 集结奖励 -->
  <div v-show="ispropsmodel"
    class="fixed bg-[rgba(0,0,0,0.8)] w-full h-[100vh] z-[1000] flex justify-center items-center left-0 top-0">
    <div class="propsbg w-[20.875rem] h-[18.9375rem] relative">
      <div class="absolute top-[.0625rem] right-0" @click="ispropsmodel = false"><img class="w-[1.9375rem] h-[2rem]"
          src="../../assets/img/activityimg/close.png" alt="">
      </div>
      <div class="tablebg w-[17.1875rem] h-[7.4375rem]  mt-[3.875rem] ml-[2.3125rem] ">

        <div class="pt-[4px] flex flex-col">
          <div class="flex  items-center mb-[.375rem] ml-[.4375rem] justify-between" v-for="item in propslistdata">
            <span class="textsyel">{{ item.msg }}</span>
            <img v-if="item.status == 2" src="../../assets/img/activityimg/okbut.png"
              class="w-[3.3125rem] h-[1.5rem] mr-[.5rem]" alt="">
            <img v-if="item.status == 1" src="../../assets/img/activityimg/lq.png"
              class="w-[3.3125rem] h-[1.5rem] mr-[.5rem]" alt="" @click="receive(item.id)">
            <img v-if="item.status == 0" src="../../assets/img/activityimg/lingqu.png"
              class="w-[3.3125rem] h-[1.5rem] mr-[.5rem]" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mainbg mt-[2.625rem]">
    <!-- logo -->
    <div class="absolute top-[5.1875rem] left-[.1875rem]">
      <img src="../../assets/img/activityimg/mtlogo.png" class="w-[5.375rem] h-[2.9375rem]" alt="">
    </div>
    <!-- 分享 -->
    <div class="rightmenu absolute top-[4.0625rem] right-4">
      <div class="flex justify-center items-center w-full h-full gap-[.8125rem] flex-col">
        <div @click="onAudio()"><img src="../../assets/img/activityimg/yy.png" class="w-[1.125rem] h-[1rem]" alt=""></div>
        <div @click="fxmodel = true"><img src="../../assets/img/activityimg/share.png" class="w-[.875rem] h-[1rem]"
            alt=""></div>
        <div @click="ishelpmodel = true"><img src="../../assets/img/activityimg/help.png"
            class="w-[1.125rem] h-[1.125rem]" alt=""></div>
      </div>
    </div>
    <!-- 转盘 -->
    <div class="flex justify-center  pt-[5.875rem] ">
      <div class="zpbg w-[18rem] h-[18.375rem] flex justify-center items-center relative ">
        <!-- 奖品 -->
        <div class="jpprops w-[13.625rem] h-[12.5625rem] " id="turntable"
          :style="{ transform: rotate_angle, transition: second }">
        </div>
        <!-- 指针 -->
        <div class="absolute top-[5.5625rem] left-[6.1875rem]">
          <img @click="onLucky()" src="../../assets/img/activityimg/rolezz.png" class="w-[6.5625rem] h-[6.6875rem]" alt=""
            v-if="!islucky">
          <img src="../../assets/img/activityimg/rolezz.png" class="w-[6.5625rem] h-[6.6875rem]" alt="" v-if="islucky">
        </div>
      </div>
    </div>
    <!-- 次数 -->
    <div class="flex justify-center mt-5">
      <span class="zhtext">召唤次数：{{ cjnumber }} </span>
      <img src="../../assets/img/activityimg/+.png" @click="onmodelfun('rwmodel')"
        class=" ml-[.375rem] w-[1.1875rem] h-[1.25rem]" alt="">
      <img src="../../assets/img/activityimg/sx.png" class="w-[1.3125rem] h-[1.3125rem] ml-[.375rem]"
        @click="activeRefresh()" />
    </div>
    <!-- 进度条里程 -->
    <div class="flex justify-center mt-[.5rem]">
      <div class="z-[1]">
        <img class="w-[2.8125rem] h-[3.8125rem]" src="../../assets/img/activityimg/rolelc.png" alt="">
      </div>
      <!-- 进度条 -->
      <div class="z-[0] ml-[-2.4375rem] relative">
        <img class="w-[21.0625rem] h-[3.75rem]" :src="stage(imagename)" alt="">
        <div class="w-[3rem] h-[3.3125rem] absolute top-0 left-[5.3rem]"
          @click="showtreasure('jb50')">
        </div>
        <div  class="w-[3rem] h-[3.3125rem] absolute top-0 left-[9.3rem]"
          @click="showtreasure('jb80')">
        </div>
        <div  class="w-[3rem] h-[3.3125rem] absolute top-0 left-[13.5rem]"
          @click="showtreasure('jb100')"></div>

        <div  class="w-[3rem] h-[3.4125rem] absolute top-0 left-[17.9rem]"
          @click="showtreasure('jb120')"></div>
      </div>
    </div>
    <!-- 用户菜单栏 -->
    <div class="flex justify-center items-center">
      <div class="bottommenu  w-[23.375rem] h-[11.8125rem] relative">
        <div class="absolute top-[1.875rem] left-[3rem] cursor-pointer" @click="onmodelfun('rwmodel')">
          <img class="w-[7.6875rem] h-[3.3125rem]" src="../../assets/img/activityimg/rw.png" alt="">
        </div>
        <div class="absolute w-[7.6875rem] h-[3.3125rem] top-[1.875rem] left-[12.0625rem]" @click="inviteReward()">
          <img class="w-[7.6875rem] h-[3.25rem]" src="../../assets/img/activityimg/jjjl.png" alt="">
        </div>
        <div class=" absolute top-[5.5625rem] left-[5.5625rem]">
          <img class="w-[11.125rem] h-[3.6875rem]" src="../../assets/img/activityimg/dowload.png" alt=""
            @click="download()">
        </div>
      </div>
    </div>
    <!-- 登录 -->
    <login v-if="isLogin" :updatedLogin="isLogin" :codeData="code" @showlogin='getloginshow' @loginok='showLogin'></login>
  </div>
</template>


<style scoped>
.proptitlespan {
  /* width: 79px;
height: 12px; */
  font-size: 13px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  color: #BF7146;
}

.propstitlebg {
  background: url(../../assets/img/activityimg/proptitlebg.png) no-repeat;
  background-size: 100% 100%;
}

.treasurebg {
  background: url(../../assets/img/activityimg/treasurebg.png) no-repeat;
  background-size: 100% 100%;
}

.prizeBg {
  background: url(../../assets/img/activityimg/zjbg.png) no-repeat;
  background-size: 100% 100%;
}

.fxmodel {
  background: url(../../assets/img/activityimg/fx.png) no-repeat;
  background-size: 100% 100%;
}

.helptag {
  background: url(../../assets/img/activityimg/helpbg.png) no-repeat;
  background-size: 100% 100%;
}

.tablebg {
  background: url(../../assets/img/activityimg/table.png) no-repeat;
  background-size: 100% 100%;
}

.propsbg {
  background: url(../../assets/img/activityimg/propsbg.png) no-repeat;
  background-size: 100% 100%;
}

.textsyel {
  /* width: 127px;
  height: 9px; */
  font-size: .5625rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #704B16;
  /* line-height: 39px; */
}

.rwbg {
  background: url(../../assets/img/activityimg/tasklistbg.png) no-repeat;
  background-size: 100% 100%;
}

.bottommenu {
  background: url(../../assets/img/activityimg/buttonbg.png) no-repeat;
  background-size: 100% 100%;
}

.zhtext {
  /* width: 4.8125rem; */
  height: .8125rem;
  font-size: 13px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  color: #704B16;
  /* line-height: 59px; */
}

.rightmenu {
  width: 1.875rem;
  height: 5.8125rem;
  background: url(../../assets/img/activityimg/userinfobg.png) no-repeat;
  background-size: 100% 100%;
}

.mainbg {
  width: 100%;
  height: 100vh;
  background: url(../../assets/img/activityimg/bg_01.png) no-repeat;
  background-size: 100% 100%;
}

.zpbg {
  background: url(../../assets/img/activityimg/swimingpool.png) no-repeat;
  background-size: 100% 100%;
}

.jpprops {
  background: url(../../assets/img/activityimg/jp.png) no-repeat;
  background-size: 100% 100%;
}

.bgImg {
  background: url(../../assets/img/activityimg/bg.png) no-repeat;
  background-size: 100% 100%;
}</style>